<template>
  <div>
    <div id="link">
      <div class="tablebox">
        <div style="float: right">
          <el-form
            ref="releaseDto"
            :model="releaseDto"
            label-width="120px"
            :inline="true"
          >
            <el-form-item label="买入/卖出:">
              <el-select
                v-model="releaseDto.trade_type"
                placeholder="买入/卖出"
                @change="refreshRealease(1)"
              >
                <el-option label="所有" value="-1" />
                <el-option label="买入" value="0" />
                <el-option label="卖出" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="撮合状态:">
              <el-select
                v-model="releaseDto.release_state_id"
                placeholder="选择撮合状态"
                @change="refreshRealease(1)"
              >
                <el-option label="所有" value="-1" />
                <el-option label="未撮合" value="0" />
                <el-option label="已撮合" value="1" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="tableTitle">所有发布</div>
        <div id="linkB">
          <el-table id="linkB" :data="allRealease" style="width: 100%" stripe>
            <el-table-column
              prop="user_id"
              label="发布人"
              align="center"
              header-align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="release_state"
              label="交易状态"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="trade_type_name"
              label="买入/卖出"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="price"
              label="报价"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="total_elec"
              label="交易总量"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="date"
              label="日期"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="start_time"
              label="交易开始时间"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="end_time"
              label="交易结束时间"
              align="center"
              header-align="center"
            />
            <el-table-column
              prop="release_time"
              label="发布时间"
              align="center"
              header-align="center"
            />
            <el-table-column
              label="操作"
              align="center"
              width="100"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="showTimeSlotInfo(scope.row.release_id)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationBox">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="refreshRealease"
            :page-count="pageHelp.pages"
            :page-size="pageHelp.pageSize"
          />
        </div>
      </div>
    </div>
    <!--所有发布详情开始 -->
    <el-dialog title="详情" :visible.sync="detaileVisible" width="600px">
      <div id="linkW">
        <el-table :data="detaileData" border style="width: 100%" stripe>
          <el-table-column
            prop="time_slot"
            label="时间槽/时"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="elec_value"
            label="电量(固定值)"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="elec_upper"
            label="电量上限"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="elec_lower"
            label="电量下限"
            align="center"
            header-align="center"
          />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="getReleaseDetail"
          :page-count="detailPageHelp.pages"
          :page-size="detailPageHelp.pageSize"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDetail">知道了 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRealease, getTimeSlotInfo } from "../../../api/link";
import Header from "@/components/header/index.vue";
import Footer from "@/components/footer/index.vue";
import Login from "@/components/login/index.vue";
import Reg from "@/components/reg/index.vue";
import Release from "@/components/release/index.vue";
export default {
  components: {
    Header,
    Footer,
    Login,
    Reg,
    Release,
  },
  data() {
    return {
      detaileVisible: false,
      detailReleaseID: undefined,
      releaseDto: {
        trade_type: "-1",
        release_state_id: "-1",
      },
      detaileData: [],
      allRealease: [],
      pageHelp: {
        // 发布用
        pages: 1, // 总页
        pageSize: 10, // 每页显示个数
      },
      detailPageHelp: {
        // 发布详情用
        pages: 1, // 总页
        pageSize: 8, // 每页显示个数
      },
    };
  },
  mounted() {
    this.refreshRealease(1);
  },
  methods: {
    refreshRealease(pageNum) {
      getRealease(
        pageNum,
        this.pageHelp.pageSize,
        this.releaseDto.release_state_id,
        this.releaseDto.trade_type
      ).then((res) => {
        const data = res.data;
        this.pageHelp.pageSize = data.pageSize;
        this.pageHelp.pages = data.pages;

        this.allRealease = data.list;
      });
    },
    // 详情
    showTimeSlotInfo(release_id) {
      this.detaileVisible = true;
      this.detailReleaseID = release_id;
      this.getReleaseDetail(1);
    },
    getReleaseDetail(pageNum) {
      getTimeSlotInfo(
        pageNum,
        this.detailPageHelp.pageSize,
        this.detailReleaseID
      ).then((res) => {
        this.detailPageHelp.pageSize = res.data.pageSize;
        this.detailPageHelp.pages = res.data.pages;

        this.detaileData = res.data.list;
      });
    },
    closeDetail() {
      this.detaileVisible = false;
      this.detailReleaseID = undefined;
    },
  },
};
</script>
<style>
</style>
